<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Template</title>
<link rel="stylesheet" type="text/css" href="css/cupertino/jquery-ui-1.7.2.custom.css"/>
<link rel="stylesheet" type="text/css" href="css/cupertino/loxia-ui-1.1.css"/>
<style>
	body, .ui-dialog { font:10pt Verdana, Arail,"Trebuchet MS", sans-serif; margin: 50px;}	
	div.ui-datepicker{ font-size: 11px;}
</style>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="scripts/jquery.livequery.js"></script>
<script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script>

<script type="text/javascript" src="scripts/loxia/1.1/jquery.loxiacore-1.1.js"></script>
<script type="text/javascript" src="scripts/loxia/1.1/jquery.loxiabutton-1.1.js"></script>
<script type="text/javascript" src="scripts/loxia/1.1/jquery.loxiainput-1.1.js"></script>
<script type="text/javascript" src="scripts/loxia/1.1/jquery.loxiaselect-1.1.js"></script>
<script type="text/javascript" src="scripts/loxia/1.1/jquery.loxiadropdown-1.1.js"></script>
<script type="text/javascript" src="scripts/loxia/1.1/jquery.loxiatooltip-1.1.js"></script>
<script type="text/javascript" src="scripts/loxia/1.1/jquery.loxiadialog-1.1.js"></script>
<script type="text/javascript" src="scripts/loxia/1.1/jquery.loxiatable-1.1.js"></script>
<!-- 
<script type="text/javascript" src="scripts/loxia/jquery.loxia-1.1.min.js"></script>
 -->
<script type="text/javascript">
var $j = jQuery.noConflict();

$j(document).ready(function(){
	this.loxiaChoice1 = new LoxiaChoice({data: {"":"hi","0":"ok","1":"tear","2":"oops"}});
	
	loxia.init({debug: true});		
	//$j("input[loxiaType]").loxiainput();	
	
    $j("input,select,textarea").bind("valuechanged",function(event,data){
    	loxia.log($j(this).get(0));
        loxia.log(data);
        });
    $j("body").bind("formvalidatefailed",function(event,data){
        loxia.unlockPage();
    	showErrorMsg(data[0]);
    });
});

function showErrorMsg(msg){
	var $info = $j("#info-block");
	if(msg){
		if(loxia.isString(msg)) msg = [msg];
		var lilist = "";
		for(var i=0; i< msg.length; i++)
			lilist += "<li>" + msg[i] + "</li>";
		$info.find("ul").html(lilist);
		$info.show();
	}else 
		$info.hide();
}

function openDialog(){
	$j('#dialog').loxiadialog('open');
}
function checkA(value, obj){
	if(value.length > 10)
		return "Too Long";
	return loxia.SUCCESS;
}
function genTd(data){
	if(data.boo)
		return "<span>ture:so str is:" + data.str + "</span>";
	else
		return "<a href='#'>false:so num is:" + data.num + "</a>";
}
var t1defaults = {page:true, alwaysShowPage : true,
				  data:[{str:"str1",num:1,boo:true},{str:"str2",num:2,boo:false},
                                  {str:"str3",num:3,boo:true},{str:"str4",num:4,boo:false},
                                  {str:"str5",num:5,boo:true},{str:"str6",num:6,boo:false}],
                  itemCount : 6, paeItemCount : 6, 
                  url : "abc",
                  sort : "str asc"};
var t2defaults = {append:1};
var dset = {
		modal: true,
		autoOpen: false,
		width: 600,
		buttons : ["<button loxiaType='button' buttonType='close'>Close</button>",
		   		{value:"Ok", buttonType : "anchor", target: "_blank", href: "abc"},
		   		{value:"Cancel", 
	   			 func : function(){
   					$j('#dialog').loxiadialog("close");
   				 }},
   				 {value:"Disabled", disabled: true}]
	};
</script>
</head>
<body>
<form id="idForm" name="sampleForm">
<p>
Auto Trim Textbox(with auto select text when focus, maxsize = 10, optional field)<input name="input" loxiaType="input" value="abc" trim="true" checkmaster="checkA" selectonfocus="true"/>
</p>
<p>
Textbox(maxsize = 10, mandatory field)<input name="input" loxiaType="input" value="abc" required="true" checkmaster="checkA"/><input name="input" loxiaType="input" value="abc" disabled="disabled" required="true" checkmaster="checkA"/><input name="input" loxiaType="input" value="abc" readonly="readonly" required="true" checkmaster="checkA"/>
</p>
<p>
Number(decimal =2, max=20, mandatory field)<input name="input" loxiaType="number" value="" decimal="2" max="20" required="true" checkmaster="checkA"/>
</p>
<p>
Textarea(optional field)<textarea name="input" loxiaType="input"></textarea><textarea name="input" disabled="disabled" loxiaType="input"></textarea>
</p>
<p>
Datebox(mandatory field)<input name="date" loxiaType="date" required="true" min="2009-11-05" max="today"/>
<input name="date" loxiaType="date" disabled="disabled" min="2009-11-05" max="today"/>
<input name="date" loxiaType="date" readonly="readonly" min="2009-11-05" max="today"/>
</p>
<p>
Select(mandatory field)<select name="select" loxiaType = "select" required="true"><option value="">Please Select</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
<select name="select" loxiaType = "select" required="true" disabled="disabled"><option value="">Please Select</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
<select name="select" loxiaType = "select" required="true" readonly="readonly"><option value="">Please Select</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
</p>
<p style="background-color: #efefef;">
Dropdown list<input name="dropdown" choice="loxiaChoice1" loxiaType="dropdown" style="width: 200px;" value="1"/>
<input name="dropdown" choice="loxiaChoice1" loxiaType="dropdown" disabled="disabled" style="width: 200px;" value="1"/>
<input name="dropdown" choice="loxiaChoice1" loxiaType="dropdown" readonly="readonly" style="width: 200px;" value="1"/>
</p>
<p>
<input type="button" loxiaType="button" buttonType="button" value="Hi Dialog" onclick="openDialog();"/>
<input type="button" loxiaType="button" buttonType="submit" value="Hi Submit"/>
<input type="button" loxiaType="button" buttonType="button" value="Hi Disabled" disabled="disabled"/>
</p>
<p>Table</p>
<table loxiaType="table" settings="t1defaults" cellpadding="0" cellspacing="0">
<thead>
<tr><th colspan="5">Head</th></tr>
<tr><th property="num"><input type="checkbox"/></th><th property="str" sort="str">String</th><th property="num" sort="num">Num Again</th><th property="boo" sort="boo">Boolean</th><th generator="genTd">Operation</th></tr>
</thead>
<tbody>	
</tbody>
<tbody>	
<tr><td></td><td></td><td></td><td></td><td>Show String: </td></tr>
</tbody>
<tbody>
</tbody>
</table>
<table loxiaType="edittable" settings="t2defaults" cellpadding="0" cellspacing="0">
<thead>
<tr><th colspan="5">Head</th></tr>
<tr><th><input type="checkbox"/></th><th>String</th><th>Num Again</th><th>Boolean</th><th formula="($2+4)*$2:2">Total</th></tr>
</thead>
<tbody>	
</tbody>
<tbody>
<tr>
<td><input type="checkbox"/></td><td><input loxiaType="input" name="a(#).str" id="a(#).str" required="true"/></td>
<td><input loxiaType="number" name="a(#).num"/></td>
<td><select loxiaType="select" name="a(#).sel" required="true"><option value="">------</option><option value="true">True</option><option value="false">False</option></select></td>
<td>&nbsp;</td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="4">Total:</td><td decimal="2">&nbsp;</td></tr>
</tfoot>
</table>
<p></p>
<div class="ui-widget" id="info-block" style="display:none;">
<div class="ui-state-highlight ui-corner-all"  style="padding: .3em .7em; width: auto;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em; margin-top: 2px;"></span>
<ul style="min-height:1%; list-style:none; margin: 0; padding-left: 0;">
</ul>
</p></div>
</div>
<div loxiaType="dialog" settings="dset" id="dialog" title="Dialog Title">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


</form>
</body>
</html>